﻿<!DOCTYPE html>
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
    <head>
        <title></title>
        <!-- META -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="Craftdzine">

        <!-- FAVICON -->
        <link rel="shortcut icon" href="favicon.ico">

        <!-- BOOTSTRAP -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- FONT AWESOME -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <!--  STYLE -->
        <link rel="stylesheet" href="css/style.css">
        <!-- HEADER 1 -->
        <link rel="stylesheet" href="css/header-1.css">
        <!-- FOOTER 1 -->
        <link rel="stylesheet" href="css/footer-1.css">
        <!-- ANIMATE -->
        <link rel="stylesheet" href="css/animate.css">
        <!-- MAGNIFIC POPUP -->
        <link rel="stylesheet" href="css/magnific-popup.css">
        <!-- FLEXSLIDER -->
        <link rel="stylesheet" href="plugins/FlexSlider/jquery.flexslider.css">
        <!--  OWL CAROUSEL -->
        <link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css">
        <!-- OWL CAROUSEL THEME -->
        <link rel="stylesheet" href="plugins/owl-carousel/owl.theme.css">
        <!-- CUBE PORTFOLIO -->
        <link rel="stylesheet" type="text/css" href="css/cubeportfolio.min.css">

        <!-- WEB FONTS -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
        <link href="http://fonts.googleapis.com/css?family=Raleway:500,800" rel="stylesheet" property="stylesheet" type="text/css" media="all" />
    </head>
    <body> 


        <!-- Site Wraper -->
        <div class="wrapper">

         
            <!-- Start Header-->
            <div class="header sticky-header">
                                
                <!-- Navbar -->
                <div class="navbar navbar-default mega-menu" role="navigation">
                    <div class="container">
                        <!-- Brand and toggle mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="fa fa-bars"></span>
                            </button>
                            <a class="navbar-brand" href="index.html">
                                <img id="logo-header" src="img/logo.png" alt="Logo" />
                            </a>
                        </div>

                        <!-- Nav links-->
                        <div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="index.html">Home</a></li>
                                <li><a href="about-us.html">About Us</a></li>
								<li><a href="service.html">Service</a></li>
								<li><a href="contact.html">Contact</a></li>
								<li><a href="login-register.html">Login / Register</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- End Navbar -->
            </div>
            <!-- End Header -->


      
     <!-- Start Breadcrumb -->
            <div class="page-heading">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <h1 class="title"><span>Login/Register</span></h1>
                            <div class="breadcrumb">
                                <a href="index.html">Home</a>
                                <span class="delimeter">/</span> 
                                <span class="current">Login/Register</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Breadcrumb -->
            
            
            <section class="main-contain bg-gray">
                <div class="container">
    <div class="login-area">
                    <div class="login-header">
                                <div class="login-details">
                                    <ul class="nav nav-tabs navbar-right">
                                        <li><a data-toggle="tab" href="#register">Register</a></li>
                                        <li class="active"><a data-toggle="tab" href="#login">Login</a></li>
                                    </ul>
                                </div>
                        </div>

                    <div class="tab-content">
                        <div id="register" class="tab-pane">
                           <div class="login-inner">
                                <div class="title">
                                    <h1>Welcome to <span>Register</span></h1>
                                </div>
                                <div class="login-form">
                                    <form>
                                        <div class="form-details">
                                            <label class="user">
                                                <input type="text" name="username" placeholder="Full Name" id="username">
                                            </label>
                                            <label class="mail">
                                                <input type="email" name="mail" placeholder="Email Address" id="mail">
                                            </label>
                                            <label class="pass">
                                                <input type="password" name="passsword" placeholder="Password" id="password">
                                            </label>
                                            <label class="pass">
                                                <input type="password" name="passsword" placeholder="Confirm Password" id="password">
                                            </label>
                                        </div>
                                        <button type="submit" class="form-btn" onsubmit="">Register</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div id="login" class="tab-pane fade in active">
                            <div class="login-inner">
                                  <div class="title">
                                    <h1>Welcome to <span>Login</span></h1>
                                </div>
                                <div class="login-form">
                                    <form>
                                        <div class="form-details">
                                            <label class="user">
                                                <input type="text" name="username" placeholder="Username" id="username">
                                            </label>
                                            <label class="pass">
                                                <input type="password" name="passsword" placeholder="Password" id="password">
                                            </label>
                                        </div>
                                        <button type="submit" class="form-btn" onsubmit="">Login</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

        </div>
                </div>
            </section>
            
            
          <!-- START FOOTER -->
            <footer class="footer">
                <div class="container">
                    <div class="row">
                                              <!-- CONTACT WIDGET -->
                        <div class="col-md-3 col-sm-6 col-xs-12">
                            <div class="widget">
                                <h6 class="text-uppercase bottom-line">Contact Us</h6>
                                <address>
                                    <p>121 King Street, Melbourne, Australia,
                                        Melbourne, Australia</p><br>
                                    <p>Phone: (+123) 12-345-6789</p>
                                    <p>Fax: (+123) 12-345-6789</p>
                                    <p>E-mail: <a href="mailto:craftdesignstaff@gmail.com">craftdesignstaff@gmail.com</a></p>
                                </address>
                            </div>
                        </div>
                        <!-- END CONTACT WIDGET -->

                        <!-- CATEGORIES WIDGET -->
                        <div class="col-md-3 col-sm-6 col-xs-12">
                            <div class="widget">
                                <h6 class="montserrat text-uppercase bottom-line">Categories</h6>
                                <ul class="icons-list">
                                    <li><a href="#">Fashion <span class="pull-right">12</span></a></li>
                                    <li><a href="#">Blogger <span class="pull-right">11</span></a></li>
                                    <li><a href="#">Sport <span class="pull-right">10</span></a></li>
                                    <li><a href="#">Photography <span class="pull-right">14</span></a></li>
                                    <li><a href="#">Popular <span class="pull-right">15</span></a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- END CATEGORIES WIDGET -->
                        
                        
                        <!-- CATEGORIES WIDGET -->
                        <div class="col-md-3 col-sm-6 col-xs-12">
                            <div class="widget">
                                <h6 class="montserrat text-uppercase bottom-line">Quick Links</h6>
                                <ul class="icons-list">
                                    <li><a href="#">About</a></li>
                                    <li><a href="#">Home</a></li>
                                    <li><a href="#">New Products</a></li>
                                    <li><a href="#">Teams</a></li>
                                    <li><a href="#">Popular</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- END CATEGORIES WIDGET -->


                        <!-- RECENT POSTS WIDGET -->
                        <div class="col-md-3 col-sm-6 col-xs-12">
                            <div class="widget">
                                <h6 class="text-uppercase bottom-line">Recent Posts</h6>
                                <ul class="recent-posts">
                                    <li>
                                        <div class="widget-posts-image">
                                            <a href="#"><img src="img/blog/1.jpg" alt=""></a>
                                        </div>
                                        <div class="widget-posts-body">
                                            <h6 class="widget-posts-title"><a href="#">Lorem ipsum dolor</a></h6>
                                            <div class="widget-posts-meta">October 18, 2016 </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="widget-posts-image">
                                            <a href="#"><img src="img/blog/2.jpg" alt=""></a>
                                        </div>
                                        <div class="widget-posts-body">
                                            <h6 class="widget-posts-title"><a href="#">Lorem ipsum dolor</a></h6>
                                            <div class="widget-posts-meta">November 15, 2016 </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="widget-posts-image">
                                            <a href="#"><img src="img/blog/3.jpg" alt=""></a>
                                        </div>
                                        <div class="widget-posts-body">
                                            <h6 class="widget-posts-title"><a href="#">Lorem ipsum dolor</a></h6>
                                            <div class="widget-posts-meta">December 01, 2016 </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- END RECENT POSTS WIDGET -->



                    </div>

                    <!-- CONTACT WIDGET -->
                    <div class="copyright">
                        <div class="text-center">
                            <p>Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                        </div>
                    </div>

                </div>
            </footer>
            <!-- END FOOTER-->    

        </div>





        <!-- JQUERY LIBS -->
        <script type="text/javascript"  src="js/jquery.min.js"></script>

        <!-- BOOTSTRAP -->
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <!-- NAVIGATION -->
        <script type="text/javascript" src="js/navigation.js"></script>
        <!-- REVOLUTION JS FILES -->
        <script type="text/javascript" src="plugins/revolution/revolution/js/jquery.themepunch.tools.min.js"></script>
        <script type="text/javascript" src="plugins/revolution/revolution/js/jquery.themepunch.revolution.min.js"></script>

        <!-- SLIDER REVOLUTION 5.0 EXTENSIONS  (Load Extensions only on Local File Systems !  The following part can be removed on Server for On Demand Loading) -->    
        <script type="text/javascript" src="plugins/revolution/revolution/js/extensions/revolution.extension.actions.min.js"></script>
        <script type="text/javascript" src="plugins/revolution/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
        <script type="text/javascript" src="plugins/revolution/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
        <script type="text/javascript" src="plugins/revolution/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
        <script type="text/javascript" src="plugins/revolution/revolution/js/extensions/revolution.extension.migration.min.js"></script>
        <script type="text/javascript" src="plugins/revolution/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
        <script type="text/javascript" src="plugins/revolution/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
        <script type="text/javascript" src="plugins/revolution/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
        <script type="text/javascript" src="plugins/revolution/revolution/js/extensions/revolution.extension.video.min.js"></script>

        <script type="text/javascript" src="plugins/revolution/revolution/js/theme/rev1.js"></script>

        <!-- OWL CAROUSEL -->
        <script type="text/javascript" src="plugins/owl-carousel/owl.carousel.min.js"></script>
        <!-- COUNTER UP -->
        <script type="text/javascript" src="js/jquery.counterup.min.js"></script>
        <!-- WAYPOINTS -->
        <script type="text/javascript" src="js/waypoints.min.js"></script>
        <!-- FLEXSLIDER -->
        <script type="text/javascript" src="plugins/FlexSlider/jquery.flexslider-min.js"></script>
        <!-- MAGNIFIC POPUP-->
        <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
        <!-- MAGNIFIC POPUP  -->
        <script type="text/javascript" src="js/magnific-popup.min.js"></script>
        <!-- CUBE PORTFOLIO -->
        <script type="text/javascript" src="js/jquery.cubeportfolio.min.js"></script>
        <!-- CUBE PORTFOLIO -->
        <script type="text/javascript" src="js/cubeportfolio/portfolio-masonry-4col.js"></script>
        <!-- CUBE TESTIMONIALS -->
        <script type="text/javascript" src="js/cubeportfolio/testimonials.js"></script>
        <!-- CUBE BLOG -->
        <script type="text/javascript" src="js/cubeportfolio/blog-grid-3col.js"></script>
        <!-- CUSTOM-->
        <script type="text/javascript" src="js/custom.js"></script>

        <!--[if lt IE 9]>
        <script src="respond.js"></script>
        <script src="html5shiv.js"></script>
        <![endif]-->

    </body>
</html>

